<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<Header
				v-model="queryData"
				:activeIdx="activeIdx"
				:disabledSearch="disabledSearch"
				@submit="handleSearch"
			/>
		</template>
		<template slot="content">
			<Tabs
				:tableHeight="tableHeight"
				ref="Tabs"
				v-model="activeIdx"
				:id="queryData.id"
				:queryData="queryData"
				:disabledSearch="disabledSearch"
				@changeDisabledSearch="changeDisabledSearch"
			/>
		</template>
	</main-content>
</template>

<script>
import Header from './components/Header'
import Tabs from './components/Tabs'
import { routerNames } from '@/utils/consts'
import MainContent from '@/components/MainContent/index.vue'
export default {
	name: routerNames.cardTablesBase,
	components: {
		Header,
		Tabs,
		MainContent
	},
	data() {
		return {
			tableHeight: 480,
			otherDependenComponents: ['wrapInnerTab'],
			disabledSearch: false,
			queryData: {
				id: ''
			},
			activeIdx: '0'
		}
	},
	watch: {
		$route: function(to, from) {
			if (
				to.path.indexOf(routerNames.cardTablesBase) > -1 &&
				this.$route.query.tableId
			) {
				this.queryData.id = this.$route.query.tableId
				this.handleSearch()
			}
		}
	},
	created() {
		if (this.$route.query.tableId) {
			this.queryData.id = this.$route.query.tableId || ''
		}
	},
	methods: {
		// 搜索
		handleSearch() {
			switch (this.activeIdx) {
				case '0':
					this.$refs.Tabs.$refs.BasicTable.loadData()
					break
				case '1':
					this.$refs.Tabs.$refs.SettleTable.clearDetailTableSort()
					this.$refs.Tabs.$refs.SettleTable.loadData()
					break
				case '2':
					this.$refs.Tabs.$refs.HandDataTable.clearDetailTableSort()
					this.$refs.Tabs.$refs.HandDataTable.loadData()
					break
				case '3':
					this.$refs.Tabs.$refs.ChatRecordTable.loadData()
					break
			}
		},
		changeDisabledSearch(val) {
			this.disabledSearch = val
		}
	}
}
</script>

<style lang="scss" scoped></style>
